<template>
    <div class="app-container">
        <!--搜索面板-->
        <div class="filter-container">
            <el-form :model="searchForm" status-icon ref="searchForm" label-width="90px">
                <el-row :gutter="10">
                    <el-col :sm='6'>
                        <el-form-item label="快递点名称" prop="name">
                            <el-input v-model.trim="searchForm.name" placeholder="请输入名称" clearable
                                      @keyup.enter.native="handleFilter"/>
                        </el-form-item>
                    </el-col>
                    <el-col :sm='6'>
                        <el-form-item label="学校" prop="schoolId">
                          <el-select v-model="searchForm.schoolId" clearable placeholder="请选择学校" @keyup.enter.native="handleFilter">
                            <el-option
                              v-for="item in schoolList"
                              :key="item.id"
                              :label="item.label"
                              :value="item.id">
                            </el-option>
                          </el-select>
                        </el-form-item>
                    </el-col>
                  <el-col :sm='6'>
                    <el-form-item label="是否启用" prop="enabled">
                      <el-select v-model="searchForm.enabled" clearable placeholder="请选择是否启用" @keyup.enter.native="handleFilter">
                        <el-option
                          v-for="item in enabledList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                    <el-col :sm="12">
                        <el-form-item label-width="20px">
                            <el-button v-waves type="success" icon="el-icon-plus" @click="handleEdit()">新增
                            </el-button>
                            <el-button v-waves type="primary" icon="el-icon-search" @click="handleFilter">
                                搜索
                            </el-button>
                            <el-button v-waves icon="el-icon-refresh" @click="handleReset">
                                重置
                            </el-button>
                            <el-button v-waves type="danger" icon="el-icon-delete" @click="handleRemove()">
                                批量删除
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <PageTable class="containtable" :query-method="page" :query-form="searchForm" ref="pageTable">
            <el-table-column label="学校名称" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.schoolName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="快递点名称" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.name }}</span>
                </template>
            </el-table-column>
            <el-table-column label="是否启用" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.enabled===1" >是</span>
                  <span v-if="scope.row.enabled===0" >否</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="200px">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑
                    </el-button>
                    <el-button type="danger" size="mini" icon="el-icon-remove" @click="handleRemove(scope.row.id)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </PageTable>
        <!--分页-->

        <!--新增-->
        <el-dialog title="编辑" :visible.sync="editFormShow" :center="true" width="880px" :close-on-click-modal="false">
            <el-form status-icon :rules="rules" :model="editForm" ref="editForm" label-width="120px">
                <el-row>

                    <el-col :sm="12">
                        <el-form-item label="学校:" prop="schoolId">
                          <el-select v-model="editForm.schoolId" clearable placeholder="请选择学校">
                            <el-option
                              v-for="item in schoolList"
                              :key="item.id"
                              :label="item.label"
                              :value="item.id">
                            </el-option>
                          </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :sm="12">
                        <el-form-item label="快递点名称:" prop="name">
                            <el-input type="text" v-model.trim="editForm.name" placeholder="请输入快递点名称"/>
                        </el-form-item>
                    </el-col>
                    <el-col :sm="12">
                      <el-form-item label="是否启用:" prop="enabled">
                        <el-select v-model="editForm.enabled" clearable placeholder="请选择是否启用">
                          <el-option
                            v-for="item in enabledList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer">
                <el-button type="primary" v-waves @click="onSubmit('editForm')" icon="el-icon-success" v-loading="loading">提交</el-button>
                <el-button v-waves @click="onCancel" icon="el-icon-error">取消</el-button>
            </div>
        </el-dialog>
        <!--新增-->
    </div>
</template>

<script>
    import waves from '@/directive/waves'
    import PageTable from "@/components/Pagination/PageTable";
    import {page, detail, edit, remove, getSchoolList} from '@/api/admin/xyps/expressStation'

    export default {
        name: 'xypsXypsExpressStation',
        components: {
            PageTable
        },
        directives: {
            waves
        },
        data() {
            return {
                page,
                loading:false,
                searchForm: {
                    schoolId: '',
                    name: '',
                    enabled:''
                },
                enabledList:[
                  {label: '是',value: 1},
                  {label: '否',value: 0}
                ],
                schoolList: [],
                rules: {
                    schoolId:  [
                        {required: true, message: '请选择学校', trigger: 'blur'}
                    ],
                    name:  [
                        {required: true, message: '请输入快递点名称', trigger: 'blur'}
                    ],
                    enabled:  [
                        {required: true, message: '请输入是否启用', trigger: 'blur'}
                    ],
                },
                editFormShow: false,
                editForm: {
                    id: '',
                    schoolId: '',
                    name: '',
                    enabled: '',
                },
            }
        },
        methods: {
            //获取学校信息列表
            getSchool(){
              getSchoolList().then(result => {
                this.schoolList = result.data.schoolList
              })
            },
            handleFilter() {
                this.$refs.pageTable.reset();
            },
            handleReset() {
                this.$refs.searchForm.resetFields();
                this.$refs.pageTable.reset();
            },
            handleEdit(row) {
                this.loading = false;
                this.editFormShow = true;
                this.editForm.id = '';
                this.$nextTick(() => {
                    this.$refs.editForm.clearValidate();
                    this.$refs.editForm.resetFields();
                });
                if (!row) {
                    return;
                }
                detail({id: row.id}).then(res => {
                    this.editForm.id = row.id;
                    Object.entries(res.data.expressStation).forEach(([key, val]) => {
                        if (this.editForm[key] !== undefined) {
                            this.editForm[key] = val;
                        }
                    });
                })
            },
            //提交表单
            onSubmit(editForm) {
                if (this.loading) {
                    return
                }
                this.loading = true;
                this.$refs[editForm].validate((valid) => {
                    if (!valid) {
                        this.loading = false;
                        return false;
                    }
                    edit(this.editForm).then(() => {
                        this.$notify({
                            title: '提示',
                            message: '提交成功',
                            type: 'success'
                        });
                        this.$refs.pageTable.refresh();
                        this.editFormShow = false;
                    }).finally(() => {
                        this.loading = false;
                    })
                })
            },
            //删除用户
            handleRemove(id) {
                if (!id) {
                    id = this.$refs.pageTable.selects.map(item => item.id).join(',')
                }
                if (!id) {
                    this.$message({
                        type: 'error',
                        message: '请选择要操作的记录!'
                    });
                    return;
                }
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    remove({ids: id}).then(() => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.$refs.pageTable.refresh();
                    })
                });
            },
            // 取消提交
            onCancel: function () {
                this.editFormShow = false;
            }
        },
        mounted() {
            this.$refs.pageTable.refresh();
        },
        created() {
          this.getSchool();
        }
    }
</script>

<style scoped>

</style>

